<template>
  <div>
    <div>
      <van-image :src="list.basicInfo.pic" />
      <p>￥{{ list.basicInfo.minPrice }}</p>
      <p>
        价格 <s>￥{{ list.basicInfo.originalPrice }}</s>
      </p>
      <div>{{ list.basicInfo.characteristic }}</div>
    </div>

    <br />
    <br />
    <br />
    <br />
    <!-- 商品详细 -->
    <div style="text-align: center">商品详细</div>
    <div class="box" v-html="list.content"></div>

    <!-- 加入购物车 -->

    <div class="cart">
      <van-icon text="首页" name="friends-o" />
      <van-icon text="客服" name="smile-o" />
      <van-icon text="购物车" name="cart-o" />

      <van-button
        size="small"
        @click="toCart"
        type="warning"
        text="加入购物车"
      />
      <van-button size="small" type="danger" text="立即购买" />
    </div>
  </div>
</template>

<script setup>
// 引入路由
import { useRoute, useRouter } from "vue-router";
// 引入详细列表接口
import { detail } from "@/api/api";
// 引入ref
import { ref } from "vue";
// 引入vuex
import { useStore } from "vuex";
let list = ref({});

let route = useRoute();
let router = useRouter();
let store = useStore();

detail(route.query.id).then((res) => {
  list.value = res.data;
});

let toCart = () => {
  router.push({
    path: "/cart",
  });
  store.commit("saveInfo", {
    id: list.value.basicInfo.id,
    name: list.value.basicInfo.name,
    price: list.value.basicInfo.minPrice,
    num: 1,
    flag: true,
    pic: list.value.basicInfo.pic,
  });
};
</script>

<style scoped>
.box {
  margin-bottom: 50px;
}
.box /deep/ img {
  width: 375px;
  height: 375px;
}
.cart {
  width: 100vw;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: white;
}
.cart i {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  width: 50px;
  font-size: 30px;
}
.cart button {
  height: 30px;
  width: 110px;
  vertical-align: middle;
}
</style>